<template>
  <div class="about">
    <!-- 三位运算符控制标题，如果有id为编辑页面，没有为新建页面 -->
    <h1>{{ id ? "编辑" : "新建" }}分类</h1>
    <el-form @submit.native.prevent="save">
      <!-- 加多一个上级分类的下拉列表 label为可选择的值 value为选中后的值-->
      <!-- 只写一个el-option只显示一个下拉内容，要多显还得使用v-for -->
      <el-form-item label="上级分类">
      <!-- 注意el-select 中v-model的值为option中:value指向的值：若v-model='model',则为 item._id=mdoel -->
      <!-- 绑定v-model后model便会增加一个model.parent信息了  使用id号作为唯一依据 -->
      <el-select v-model="model.parent">  
      <el-option v-for="item in parent" :key="item._id" :label="item.name" :value="item._id"></el-option> 
      </el-select>
      </el-form-item>
      <el-form-item label="名称">
      <el-input v-model="model.name"></el-input></el-form-item>
      <el-form-item>
        <!-- native-type:原生属性 -->
        <el-button type="primary" native-type="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  //name 属性的作用：1.自身调用 2.chrome vue插件查看 3.keep-alive 指定组件是否需要缓存时引用的是name组件
  name: "CategoriesEdit",
  //使用props
  props: {
    //id=this.$route.params.id
    id: {},
    //表示直接this.id
  },
  data() {
    return {
      model: {},
      // parent数据为父分类数据，传到上面做可选父分类值
      parent:[]
    };
  },
  methods: {
    async save() {
      //save要分两种情况，有id时为修改状态，没有id时为保存状态
      let res
      //注意在script里面要加this/在html里不用加this
      if (this.id) {
        //用put（）接口，put和post类似，但是put接口用于更新数据,会把所有数据传到后端
        //patch（）请求也用于更新数据，但是只会把更新的数据传到后端
        res =await this.$http1.put(`rest/categories/${this.id}`,this.model)
      }
      else {
        res = await this.$http1.post("rest/categories", this.model);
      }
        console.log(res);
        this.$router.push("/categories/list");
        this.$message({ type: "success", message: "保存成功" });
    },
    //除非一定要用到结果的不然一般都用异步操作  --接口请求也是要异步操作
    async fech() {
      const res = await this.$http1.get(`rest/categories/${this.id}`);
      this.model = res.data;
    },
    async parentfech(){
      const res=await this.$http1.get('rest/categories')
      this.parent=res.data
    }
  },
  //在编辑分类的时候显示要编辑的值 用created（）周期
  created() {
    //1.要有id的时候才能执行显示id值的函数  用与操作，表示两个都满足了才能实现操作
    this.id && this.fech();
    this.parentfech();
  },
};
</script>

<style>
</style>